<template>
  <div class="app-container">
    <el-card>
      <div class="main-title">角色管理</div>
      <!-- 查询 -->
      <div class="search-card">
        <div class="search-form">
          <el-form :model="searchForm">
            <div class="search-form-item">
              <el-button type="primary" icon="el-icon-plus" size="medium" @click="linkTo('add', -1)">新增</el-button>
            </div>
            <el-divider class="mr-20" direction="vertical" />
            <div class="search-form-item">
              <i class="el-icon-search" />
              <span>查询：</span>
            </div>
            <div class="search-form-item">
              <el-input v-model.trim="searchForm.roleName" size="medium" placeholder="角色名称" />
            </div>
            <div class="search-form-item">
              <el-button size="medium" type="primary" @click="initTable">查询</el-button>
              <el-button size="medium" @click="resetForm">清空</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 列表区域 -->
      <el-table
        v-loading="listLoading"
        class="table-area"
        :data="tableData"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="officeName" label="归属机构" align="center"></el-table-column>
        <el-table-column prop="createBy" label="创建人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
           <!-- <el-button
              class="self-btn normal-btn"
              type="text"
              icon="el-icon-turn-off"
            >停用</el-button>-->
            <el-button
              class="self-btn normal-btn"
              type="text"
              icon="el-icon-edit"
              @click="linkTo('update', scope.row.id)"
            >修改</el-button>
            <el-button
              class="self-btn delete-btn"
              type="text"
              icon="el-icon-close"
              @click="deleteRow(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-main">
        <el-pagination
          background
          :page-size="searchForm.pageSize"
          :current-page="searchForm.pageNo"
          layout="total, prev, pager, next"
          :total="total"
        />
      </div>
    </el-card>
    <el-dialog :title="editTitle+'角色'" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="form" size="medium" :model="form" class="dialog-form" :label-width="formLabelWidth">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model.trim="form.roleName" placeholder="请填写角色名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色权限" prop="loginName">
          <el-input v-model.trim="form.loginName" placeholder="角色授权" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="white-btn" size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" class="green-btn" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getSysRoleList} from '@/api/sysSettings/role'
export default {
  name: 'Product',
  data() {
    return {
      tableData: [],
      listLoading: false,
      headerCellStyle() {
        return 'background-color: #f5f7fa;color: #606266'
      }, // 表格表头样式
      searchForm: {
        pageSize: 10,
        pageNo: 1
      },
      editTitle: '新增',
      type: 'add',
      dialogFormVisible: false,
      total: null,
      form: {},
      formLabelWidth: '80px'
    }
  },
  created() {
    this.initTable()
  },
  methods: {
    //列表初始化
    initTable() {
      let param = this.searchForm
      this.listLoading = true
      getSysRoleList(param).then(response => {
        this.listLoading = false
        let data = response.object
        this.tableData = data.list
        this.total = data.total
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 查看
    toDetal() {
      this.$router.push('/product/detail')
    },
    // 新增
    btnEdit(type, data) {
      this.form = {
        roleName: data.roleName,
        loginName: data.loginName
      }
      this.type = type
      this.dialogFormVisible = true
      if (type === 'update') {
        this.editTitle = '修改'
      } else if (type === 'add') {
        this.editTitle = '新增'
      }
    },
    // 搜索重置
    resetForm() {
      this.searchForm = { pageNo: 1, pageSize: 10 }
      this.initTable()
    },
    // 跳转
    linkTo (type, id) {
      if (type === 'distribute') {
       // this.$router.push('/sysSettings/roleManagement/distribution/info/' + id) // 暂无此权限功能
      } else {
        this.$router.push('/system/role/info/' + type + '/' + id)
      }
    },
    // 删除
    deleteRow(val) {
      this.$confirm('确定要删除吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
        })
        .catch((action) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-group {
  padding: 16px 20px;
}
.table-area {
  padding: 0 20px;
}
.product-status {
  width: 58px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  background: #f2fff7;
  border: 1px solid #1eb955;
  color: #1eb955;
}
.product-status.active {
  background: #f3f3f3;
  border: 1px solid #999;
  color: #999;
}

// 查询区域
.search-card {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  background-color: #FFF;
  .query-text {
    width: 80px;
  }
  .search-form {
    .search-form-item {
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 6px;
    }
  }
}
</style>
